<template>
    <el-icon class="cursor-pointer" :size="18" @click="dialogTableVisible = true">
        <Memo />
    </el-icon>
    <el-dialog v-model="dialogTableVisible" title="播放列表" :align-center="true">
        <div style="max-height:600px;overflow-y: auto;">
            <el-table :data="list" :row-class-name="tableRowClassName" :row-style="{ padding: 0 }" @cell-click="onClick">
                <el-table-column property="image" label="头像" width="80" style="padding:0px;">
                    <template #default="scope">
                        <el-image :src="scope.row.image" class="rounded" style="width:30px;height:30px;" />
                    </template>
                </el-table-column>
                <el-table-column property="author" label="作者" width="150" />
                <el-table-column property="name" label="歌曲名" />

            </el-table>
        </div>
    </el-dialog>
</template>
<script setup>
import { Memo } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { list, current } from './music'
const dialogTableVisible = ref(false);

const tableRowClassName = ({
    row,
    rowIndex,
}) => {
    if (rowIndex === current.value) {
        return 'success-row cursor-pointer'
    }
    return 'cursor-pointer'
}

const onClick = function (row, column, cell, event) {
    current.value = list.value.findIndex(item => item == row);
}
</script>
<style>
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>